extends /default.pug

block view
  .animated.fadeIn
    .row
      .col-md-12
        .card
          .card-header
            | 3d Switch
          .card-body
            label.switch.switch-3d.switch-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-3d.switch-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-3d.switch-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-3d.switch-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-3d.switch-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-3d.switch-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-3d.switch-primary
              input.switch-input(type='checkbox', checked='', disabled='')
              span.switch-slider
            label.switch.switch-3d.switch-primary
              input.switch-input(type='checkbox', disabled)
              span.switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch default
          .card-body
            label.switch.switch-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch default - pills
          .card-body
            label.switch.switch-pill.switch-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch outline
          .card-body
            label.switch.switch-outline-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-outline-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-outline-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-outline-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-outline-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-outline-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch outline - pills
          .card-body
            label.switch.switch-pill.switch-outline-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-outline-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-outline-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-outline-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-outline-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-outline-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch outline alternative
          .card-body
            label.switch.switch-outline-primary-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-outline-secondary-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-outline-success-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-outline-warning-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-outline-info-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-outline-danger-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch outline alternative - pills
          .card-body
            label.switch.switch-pill.switch-outline-primary-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-outline-secondary-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-outline-success-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-outline-warning-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-outline-info-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
            label.switch.switch-pill.switch-outline-danger-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with text
          .card-body
            label.switch.switch-label.switch-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with text - pills
          .card-body
            label.switch.switch-label.switch-pill.switch-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with text outline
          .card-body
            label.switch.switch-label.switch-outline-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-outline-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-outline-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-outline-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-outline-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-outline-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with text outline - pills
          .card-body
            label.switch.switch-label.switch-pill.switch-outline-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-outline-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-outline-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-outline-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-outline-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-outline-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with text outline alternative
          .card-body
            label.switch.switch-label.switch-outline-primary-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-outline-secondary-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-outline-success-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-outline-warning-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-outline-info-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-outline-danger-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with text outline alternative - pills
          .card-body
            label.switch.switch-label.switch-pill.switch-outline-primary-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-outline-secondary-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-outline-success-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-outline-warning-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-outline-info-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
            label.switch.switch-label.switch-pill.switch-outline-danger-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='On', data-unchecked='Off')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with icon
          .card-body
            label.switch.switch-label.switch-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with icon - pills
          .card-body
            label.switch.switch-label.switch-pill.switch-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with icon outline
          .card-body
            label.switch.switch-label.switch-outline-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-outline-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-outline-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-outline-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-outline-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-outline-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with icon outline - pills
          .card-body
            label.switch.switch-label.switch-pill.switch-outline-primary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-outline-secondary
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-outline-success
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-outline-warning
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-outline-info
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-outline-danger
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with icon outline alternative
          .card-body
            label.switch.switch-label.switch-outline-primary-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-outline-secondary-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-outline-success-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-outline-warning-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-outline-info-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-outline-danger-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
      // /.col
      .col-md-6
        .card
          .card-header
            | Switch with icon outline alternative - pills
          .card-body
            label.switch.switch-label.switch-pill.switch-outline-primary-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-outline-secondary-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-outline-success-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-outline-warning-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-outline-info-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
            label.switch.switch-label.switch-pill.switch-outline-danger-alt
              input.switch-input(type='checkbox', checked='')
              span.switch-slider(data-checked='&#x2713;', data-unchecked='&#x2715;')
      // /.col
      .col-md-12
        .card
          .card-header
            | Sizes
          .card-body.p-0
            table.table.table-hover.table-striped.table-align-middle.mb-0
              thead
                th Size
                th Example
                th CSS Class
              tbody
                tr
                  td
                    | Large
                  td
                    label.switch.switch-lg.switch-3d.switch-primary
                      input.switch-input(type='checkbox', checked='')
                      span.switch-slider
                  td
                    | Add following class
                    code .switch-lg
                tr
                  td
                    | Normal
                  td
                    label.switch.switch-3d.switch-primary
                      input.switch-input(type='checkbox', checked='')
                      span.switch-slider
                  td
                    | -
                tr
                  td
                    | Small
                  td
                    label.switch.switch-sm.switch-3d.switch-primary
                      input.switch-input(type='checkbox', checked='')
                      span.switch-slider
                  td
                    | Add following class
                    code .switch-sm
      // /.col
    // /.row
